<div class="mb-3">
  <label *ngIf="title" [for]="inputId">{{title}}</label>

  <div class="input-group" [class.is-invalid]="error">
    <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>

      <ng-template #popContent>
        <div style="min-width: 200px;" class="pb-3">
          <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
        </div>

      </ng-template>

      <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">

      <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-5" viewBox="0 0 16 16">
          <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
          <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
        </svg>
      </button>

    </div>
    <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
    <div class="invalid-feedback">
      {{error}}
    </div>
</div>
